import { defineComponent, reactive, toRefs } from "@vue/runtime-core";
import { Form, Input, InputNumber, message, Modal } from "ant-design-vue";
import { useForm } from "@ant-design-vue/use";
import { getService, registerService } from "@/api/service";

export default defineComponent({
  name: "registerForm",
  props: {
    onSuccess: {
      type: Function,
    },
  },
  setup(props, context) {
    const state = reactive({
      title: "",
      width: 520,
      visible: false,
      submitting: false,
      modal: {
        id: undefined,
        serverName: "",
        method: "",
        url: "",
        healthCheckUrl: "",
        description: "",
      },
      rules: {
        serverName: [
          { type: "string", required: true, message: "请输入服务名称" },
        ],
        url: [
          { required: true, message: "请输入服务地址" },
          {
            type: "url",
            message: "服务地址格式为一个Url",
          },
        ],
        healthCheckUrl: [
          {
            type: "url",
            message: "服务地址格式为一个Url",
          },
        ],
      },
    });

    const { resetFields, validate, validateInfos } = useForm(
      state.modal,
      state.rules
    );

    const openModal = (title: string, id?: string) => {
      state.title = title;
      state.visible = true;

      if (id) {
        getService(id).then((res: any) => {
          if (res && res.success) {
            Object.assign(state.modal, res.result);
          }
        });
      }
    };

    const onCancel = () => {
      state.visible = false;
      resetFields();
    };

    const onOK = () => {
      validate().then(() => {
        state.submitting = true;
        registerService(state.modal)
          .then((res: any) => {
            if (res && res.success) {
              message.success("操作成功！");
              onCancel();
              context.emit("success");
            } else {
              message.error(res.error.message);
            }
          })
          .finally(() => {
            state.submitting = false;
          });
      });
    };

    return {
      ...toRefs(state),
      validateInfos,
      openModal,
      onCancel,
      onOK,
    };
  },
  render() {
    return (
      <>
        <Modal
          title={this.title}
          width={this.width}
          visible={this.visible}
          confirmLoading={this.submitting}
          destroyOnClose={true}
          onOk={this.onOK}
          onCancel={this.onCancel}
        >
          <Form layout="vertical">
            <Form.Item label="服务名称" {...this.validateInfos.serverName}>
              <Input v-model={[this.modal.serverName, "value"]} />
            </Form.Item>

            <Form.Item
              label="服务地址"
              {...this.validateInfos.url}
              extra="被调用服务的REST API地址，请求均以post application/json形成进行请求"
            >
              <Input v-model={[this.modal.url, "value"]} />
            </Form.Item>

            <Form.Item
              label="健康检查"
              {...this.validateInfos.healthCheckUrl}
              extra="提供一个服务健康检查的地址"
            >
              <Input v-model={[this.modal.healthCheckUrl, "value"]} />
            </Form.Item>

            <Form.Item label="备注">
              <Input.TextArea v-model={[this.modal.description, "value"]} />
            </Form.Item>
          </Form>
        </Modal>
      </>
    );
  },
});
